<div class="flex-wrap">
<div class="aside-wrap">
  <div class="aside-content">
    <details class="aside-content details-reset menu js-menu">
      <summary><%= icon_tag("menu") %></summary>
      <nav>
       <%= render_list_items(class: "menu-item", type: :link, check_parameters: true) do |li|
        li << link_to(main_app.notifications_path, class: "menu-item") do %>
          <span class="mr-3 icon-middle-wrap"><%= icon_tag("bell", label: t(".Unread")) %></span>
          <b class="counter"><%= unread_notifications_count %></b>
        <% end
        li << link_to(icon_tag("notice", label: t(".All")), main_app.notifications_path(tab: "all"), class: "menu-item")
      end %>
      </nav>
    </details>
  </div>
</div>

<div class="main-wrap">
  <div class="main-content">
    <div class="notifications box">
      <% if params[:tab] == "all" %>
          <%= link_to t(".Clear all"), main_app.clean_notifications_path, class: 'float-right f6 mt-2 hover-danger', method: 'delete' %>
        <% else %>
          <%= form_with scope: :notification, class: "float-right mt-2", url: main_app.read_notifications_path, method: :post do |form| %>
            <% @notifications.each do |note| %>
            <input type="hidden" name="ids[]" value="<%= note.id %>">
            <% end %>
            <button type="submit" class="button-reset f6"><%= t(".Mark as read") %></button>
          <% end %>
        <% end %>
      <h2 class="sub-title">
        <span><% if params[:tab] == "all" %><%= t(".All") %><% else %><%= t(".Unread") %><% end %></span>
      </h2>
      <div class="list">
        <% if @notifications.blank? %>
          <div class="blankslate">
            <% if params[:tab] == "all" %>
              <%= t(".You does not have any notifications") %>
            <% else %>
              <%= t(".You does not have any unread notifications") %>
            <% end %>
          </div>
        <% else %>
          <%= render @notifications %>
        <% end %>
      </div>
    </div>
    <%= paginate @notifications, params: { controller: "notifications", action: "index" } %>
  </div>
</div>
</div>

<script>
  $(".notifications").on("click", ".notification", function(e) {
    e.stopPropagation();
    $note = $(e.currentTarget);
    $note.removeClass("unread");
    Turbolinks.visit("/notifications/" + $note.attr('data-id'));
    return false;
  })
</script>